<template>
	<ul class="img-lists">
		<li v-for="img in imgs" :key="img.ID" @click="pickImg(img)">
			<div class="imgbox">
				<div class="box" v-if="showImage">
					<img :src="img.ImgUrl" :alt="img.Name" :title="img.Name">
					<i v-if="active.id === img.ID" class="iconfont icon-selected"></i>
				</div>
				<div class="box" v-else>
					<img :src="img.ImgUrl" :alt="img.Name" :title="img.Name">
					<i v-if="active.imgsetUrl.indexOf(img.ImgUrl)>-1" class="iconfont icon-selected"></i>
				</div>
			</div>
		</li>
	</ul>
</template>

<script>
	export default {
		name: 'img-lists',
		props: {
			lists: {
				type: Array
			},
			active: {
				type: Object
			},
			imgtype: {
				type: String,
				default: "image"
			}
		},
		data() {
			return {
				imgList: []
			}
		},
		computed: {
			imgs() {
				return this.lists
			},
			showImage() {
				if (this.imgtype === "image"||this.imgtype==='btn'||this.imgtype==='backimg') {
					return true
				}
				return false
			}

		},
		methods: {
			pickImg(img) {
				this.$emit('pick', img)
			}
		}
	}
</script>

<style lang="scss">
	// img-pick
	.img-lists {
		overflow: hidden;
		height: auto;
		overflow: auto;
		margin-bottom: 90px;

		>li {
			float: left;
			width: 20%;
			padding: 0 10px 10px 10px;
			cursor: pointer;
		}

		.imgbox {
			display: table;
			position: relative;
			border: 1px solid #eee;
			width: 100%;
			height: 129px;
			text-align: center;
			background: #f0f1f6;

			>.box {
				vertical-align: middle;
				display: table-cell;

				img {
					width: 86px;
					height: 136px;
					display: inline-block;
					vertical-align: middle;
				}

				i {
					position: absolute;
					bottom: -3px;
					right: -1px;
					font-size: 20px;
					color: #5c7aff;
				}
			}
		}
	}
</style>
